<template>
	<view>
		<view class="menu-title">
			<view class="menu-name" v-for="(items, index) in menuList" :key="index" @click="changemMenu(index)">
				<view class="menu-items-name" :class="current === index ?'current-name':''">
					{{ items.name }}
				</view>
			</view>
		</view>
		<view class="serch-view">
			<search-input></search-input>
		</view>
		<view class="maintain-content">
			<view class="maintain-list" v-for="(items, index) in maintainList" :key="index" @click="changePage(items)">
				<view class="maintain-detail">
					<view class="maintain-name"> {{ index + 1 }} {{ items.name }} </view>
					<view class="maintain-status"> {{ items.status }} &nbsp; &nbsp;{{ items.time }} </view>
				</view>
				<view class="list-arrow">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.arrow"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchInput from '@/components/search-input/index.vue';
	export default {
		components: {
			searchInput
		},
		data() {
			return {
				current: 0,
				menuList: [{
					name: '全部'
				}, {
					name: '待维修'
				}, {
					name: '已完成'
				}],
				maintainList: [{
					name: '一号午餐机(AQ54580900)',
					time: '2020-8-9',
					status: '离线'
				}, {
					name: '二号午餐机(AQ5454637500)',
					time: '2020-8-9',
					status: '硬件故障'
				}, {
					name: '1.一号午餐机(AQ54580900)',
					time: '2020-8-9',
					status: '离线'
				}],
				icons: {
					arrow: '/static/images/icons/icon_next@3x.png'
				},
			}
		},
		methods: {
			changemMenu(index) {
				this.current = index
			},
			changePage(data) {
				const _this = this;
				uni.navigateTo({
					url: '/pages/device-Info/index' + '?' + _this.version
				})
			}
		}
	}
</script>

<style>
	.menu-title {
		display: flex;
		align-items: center;
		height: 122rpx;
		padding: 0rpx 30rpx;
	}

	.serch-view {
		padding: 0rpx 30rpx;
	}

	.menu-name {
		position: relative;
	}

	.menu-title .menu-name:not(:last-child) {
		margin-right: 35rpx;
	}

	.menu-items-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		padding: 16rpx 0;
	}

	.current-name {
		font-size: 36rpx;
		color: #333333
	}

	.current-name:after {
		content: "";
		display: table;
		width: 40rpx;
		height: 8rpx;
		background: rgba(255, 195, 36, 1);
		border-radius: 4rpx;
		position: absolute;
		bottom: 0;
		left: calc(50% - 20rpx)
	}

	.maintain-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.list-arrow {
		width: 15rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
	}

	.maintain-name {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.maintain-status {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}
</style>
